<!-- 新增/编辑计量单位弹出框 -->
<template>
  <a-modal
    width="80%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title>添加计量单位</template>
    <a-form auto-label-width :model="currForm.list" direction="vertical">
      <a-form-item label="计量单位：" v-if="type === 'add'">
        <a-radio-group
          size="large"
          :default-value="1"
          v-model="currForm.list.type"
          @change="changeType"
        >
          <a-radio
            :value="1"
            :style="{
              marginRight: '20px',
            }"
          >
            <template #radio="{ checked }">
              <div
                :style="{
                  display: 'flex',
                  width: '135px',
                }"
                :class="checked ? 'checked-radio' : 'unchecked-radio'"
              >
                <div
                  :style="{
                    width: '35px',
                    textAlign: 'center',
                  }"
                  :class="
                    checked
                      ? 'radio-icon-box-checked'
                      : 'radio-icon-box-unchecked'
                  "
                >
                  <icon-check-circle
                    :class="
                      checked ? 'radio-icon-checked' : 'radio-icon-unchecked'
                    "
                    class="radio-icon"
                    size="20px"
                  />
                </div>
                <div
                  :style="{
                    width: '100px',
                    textAlign: 'center',
                  }"
                >
                  单计量
                </div>
              </div>
            </template>
          </a-radio>
          <a-radio :value="2">
            <template #radio="{ checked }">
              <div
                :style="{
                  display: 'flex',
                  width: '135px',
                }"
                :class="checked ? 'checked-radio' : 'unchecked-radio'"
              >
                <div
                  :style="{
                    width: '35px',
                    textAlign: 'center',
                  }"
                  :class="
                    checked
                      ? 'radio-icon-box-checked'
                      : 'radio-icon-box-unchecked'
                  "
                >
                  <icon-check-circle
                    :class="
                      checked ? 'radio-icon-checked' : 'radio-icon-unchecked'
                    "
                    class="radio-icon"
                    size="20px"
                  />
                </div>
                <div
                  :style="{
                    width: '100px',
                    textAlign: 'center',
                  }"
                >
                  多计量
                </div>
              </div>
            </template>
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="计量单位编码：">
        <a-input v-model="currForm.list.code"></a-input>
      </a-form-item>
      <div>
        <single-form
          ref="singleRef"
          v-if="currForm.list.type === 1"
          :form="currForm.list"
        ></single-form>
        <multi-form ref="multiRef" :form="currForm.list" v-else></multi-form>
      </div>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watch } from 'vue';
  import { cloneDeep } from 'lodash';
  import singleForm from './components/single-form/index.vue';
  import multiForm from './components/multi-form/index.vue';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      form?: any; // 传进来的数据
      type?: string; // 判断是编辑还是新增
    }>(),
    {
      form: undefined,
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'unitEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  let singleRef = ref(); // 单计量组件ref
  let multiRef = ref(); // 多计量组件ref

  const currForm = reactive<any>({
    list: {
      type: 1,
      code: '',
      isDefault: 1,
      isEnable: 1,
    },
  });
  watch(modalVisible, (newVal, oldVal) => {
    // 如果newVal为true
    if (newVal) {
      if (props.type === 'edit') {
        const { form } = props;
        currForm.list = cloneDeep(form);
      } else {
        currForm.list = {
          type: 1,
          code: '',
          isDefault: 1,
          isEnable: 1,
        };
      }
    }
  });

  const changeType = (type: number) => {
    if (type === 1) {
      currForm.list = {
        type: 1,
        code: '',
        isDefault: 1,
        isEnable: 1,
      };
    } else {
      currForm.list = {
        type: 2,
        code: '',
        name: '',
        item: [
          {
            name: '', // 单位名称
            isParent: true, // 是否为父单位
            conversionType: 1, // 换算类型
            conversionRate: 1, // 换算率
            conversionRemark: '', // 换算说明
          },
        ],
      };
    }
  };

  // 保存
  const handleOk = () => {
    modalVisible.value = false;

    // 单计量
    if (currForm.list.type === 1) {
      currForm.list = {
        type: 1,
        code: currForm.list.code,
        ...singleRef.value.currForm.list,
      };
    }
    // 多计量
    else {
      currForm.list = {
        type: 2,
        code: currForm.list.code,
        ...multiRef.value.currForm.list,
      };
    }
    emit('unitEmit', currForm.list);
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 16px;
  }
  .checked-radio {
    background-color: #3491fa;
    color: #fff;
    border: 1px solid #3491fa;
    font-weight: 700;
    font-size: 16px;
  }
  .radio-icon-box-checked {
    border: 1px solid #3491fa;
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: #3491fa;
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }
</style>
